<template>
  <el-container>
    <!-- 头部 -->
    <el-header style="height: 100px;border-bottom:2px solid slategray">
      <div style="display:flex;align-items: center;">
        <img src="../assets/images/医院 (1).png" alt="医院 logo" style="height: 50px;margin-right: 10px;">
        <span style="font-size:30px"><strong>医院体检预约管理系统</strong></span>
        <div style="float:right;font-size:18px;margin-left: 1000px;">
          欢迎您：
          <span>{{account}}</span>
          &nbsp;&nbsp;&nbsp;
          <el-link type="warning" @click="outlogin()" style="color:beige;">退出登录</el-link></div>
        </div>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="180px">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
        >
        </el-menu>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          router
          v-for="meun in meunList"
          :key="meun.m_mid"
        >
          <el-submenu :index="'/show/'+meun.id">
            <template #title>
              <span>{{meun.m_mname}}</span>
            </template>
            <el-menu-item-group v-for="c in meun.m_backup" :key="c.mid">
              <router-link :to="'/'+c.url">
                <el-menu-item :index="'/'+c.url">{{c.mname}}</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu> 
      </el-aside>
      <!-- 主体区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import show from "../components/show.vue";
//引入时间工具类
import {dateFormat} from '../assets/js/tools' 
import {loginLogs} from '../assets/js/tools' 
export default {
  name: "home",
  data() {
    return {
      isLogin : false,
      account:'您还没有登录',
      section: [],
      //菜单数据
      meunList:[],
      //延迟菜单数据
      meunListAll:[],
      post: [],
      //登录用户信息
      userInfos:[],
      ip: 'ss'
    };
  },
  components: {
    show
  },
  created() {
    this.userInfo();
    // this.getsection();
    // this.getpost();
    let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));//取值;
    this.userInfos = userInfo;
    this.userMenu(userInfo[0].uid);
  },
  methods: {
    //获取登录用户信息
    userInfo(){
        let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));//取值;
        if(userInfo!=null){
            //已登录
            this.isLogin = true;
            this.account = userInfo[0].account;
            
        }else{
            this.$message.error("你还没有登录！");
            //未登录
            setTimeout(()=>{
                this.$router.replace('/login')
            },500)
        }
    },
    //获取当前登录用户所拥有的的菜单
    userMenu(uid){
      let _this = this;
      //根据用户编号查询root节点
      //发送异步请求
      this.axios.get("/api/rootMeun",{
        params:{
          uid: uid,
        }
      }).then(res => {
        _this.meunList = res.data;
        for( var i = 0; i <_this.meunList.length; i++){
          let mid = _this.meunList[i].m_mid
          //查询所有root节点的子节点并且赋值
          // 发送异步请求
          _this.childrenMeun(mid,i);
        }
      });
      
      console.log(_this.meunList)
    },
    //获取当前登录用户所拥有的的菜单
    childrenMeun(mid,i){
      let _this = this;
      this.axios.get("/api/childrenMeun",{
        params:{
          mid: mid,
        }
      }).then(res => {
        _this.meunList[i].m_backup = res.data;
      });
    },
    

    //退出登录
    outlogin(){
      if(''!=this.userInfos){
        this.ip = sessionStorage.getItem('ip')
        console.log("zhe",this.userInfos[0].uid);
        //这里留一个日志新增
        loginLogs(this.userInfos[0].uid,this.ip,"1");
      }
      window.sessionStorage.setItem('userInfo',JSON.stringify(null));//赋值
      this.$message.warning("退出登录成功！");
      //未登录
      setTimeout(()=>{
          this.$router.replace('/login')
      },500)
    },
  }
};
</script>


<style lang="less" scoped>
.el-container {
  height: 100%;
  
  /* 头部样式 */
  .el-header {
    background-color: #ef8989;  /* 浅红色背景（仿第二张图配色） */
    color: #090909;            /* 深灰色文字（提高对比度） */
    font-size: 20px;
    text-align: center;
    line-height: 100px;        /* 垂直居中 */
    border-bottom: 2px solid slategray; /* 底部灰色边框 */
  }

  /* 侧边栏区域 */
  .el-aside {
    background-color: #ef8989; /* 与头部一致的浅红色背景 */
    width: 180px !important;   /* 固定宽度 */

    /* 通用链接样式 */
    a {
      text-decoration: none;  /* 去除下划线 */
      &:hover {
        text-decoration: none; /* 悬停时保持无下划线 */
      }
    }

    /* 菜单整体样式 */
    .el-menu {
      border: none;            /* 去除默认边框 */
      background-color: #ef8989; /* 与侧边栏一致的背景色 */

      /* 菜单项文字颜色 */
      .el-submenu__title,
      .el-menu-item {
        color: #191818 !important; /* 白色文字（仿第一张图侧边栏） */
        
        /* 激活状态样式 */
        &.is-active {
          color: #ff9900 !important; /* 橙色文字（仿第二张图激活状态） */
        }
        
        /* 悬停效果 */
        &:hover {
          background-color: rgba(0, 0, 0, 0.1) !important; /* 浅黑色遮罩 */
        }
      }

      /* 展开的子菜单背景 */
      .is-opened .el-submenu__title {
        background-color: #d87070 !important; /* 加深红色背景 */
      }
    }

    /* 特殊子菜单组样式 */
    .el-menu-vertical-demo {
      /* 第一个子菜单项背景 */
      .el-submenu:nth-child(1) .el-menu-item-group .el-menu-item {
        background-color:  #f9f7f7; /* 浅灰色背景 */
        margin-top: 0px;
      }
      
      /* 菜单项链接样式 */
      .el-menu-item a {
        text-decoration: none; /* 去除链接下划线 */
      }
    }
  }

  /* 主体内容区域 */
  .el-main {
    background-color: #fff;    /* 白色背景 */
    padding: 20px;             /* 内边距 */
  }
}

/* 退出链接特殊样式 */
.el-link {
  color: beige !important;     /* 米色文字 */
  &:hover {
    color: #ff9900 !important; /* 悬停时橙色 */
  }
}
</style>